<template>
  <div class="tmpl">
    <div class="photo-bottom">
      <ul>
        <li class="photo-comment">
          <span>提交评论</span>
          <span>
            <a>返回</a>
          </span>
        </li>
        <li class="text-comment">
          <textarea name id cols="30" rows="10" v-model="commentsContent"></textarea>
        </li>
        <li class="fbpl">
          <button type="button" @click="commentHandlers">发表评论</button>
        </li>
        <li class="photo-comment">
          <span>评论列表</span>
          <span>44条评论</span>
        </li>
      </ul>
      <ul class="comment-list">
        <li v-for="(comment, index) in comments" :key="index">
          <span>{{comment.id}}、</span>
          <span>{{comment.user_name}}：</span>
          <span>{{comment.content}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span>{{comment.add_time | relativeTime}}</span>
        </li>
      </ul>
      <a href="javascript:void(0)" class="jzgd">
        <!-- <mt-button type="danger" size="large" @click="loadMore">加载更多</mt-button> -->
        <button type="button" @click="loadMore">加载更多……</button>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "Comment",
  // 父子组件传值
  props: ["cid"],
  data() {
    return {
      comments: [],
      page: 1,
      commentsContent: ""
    };
  },
  methods: {
    // 评论按钮的事件操作
    commentHandlers() {
      // console.log(111);
      // 如果不为空
      if (this.commentsContent) {
        // post请求
        this.$axios
          .post(`postcomment/:${this.cid}`, 'content=' + this.commentsContent)
          .then(res => {
            console.log(res.data);

            // 发表成功， 清空评论框
            this.commentsContent = "";
            this.page = 1;
            this.loadMore();
          })
          .catch(err => {
            console.log("评论失败", err);
          });
      }
    },
    // 加载更多按钮的事件操作
    loadMore() {
      console.log("aaaa: ", this.comments);
      /* /${this.cid} */
      this.$axios
        .get(`getcomments?pageindex=${this.page}`)
        .then(res => {
          console.log(res);

          if (res.data.length == 0) {
            this.$toast("没有数据了");
            return;
          }

          if (this.page > 1) {
            console.log(this.page);
            // 表示加载更多
            // this.comments = this.comments.push.apply(this, [res.data]);
            this.comments = this.comments.concat(res.data);
          } else {
            // 否则第一次加载
            this.comments = res.data;
          }
          this.page++;
        })
        .catch(err => {
          console.log("加载评论数据失败", err);
        });
    }
  },
  created() {
    console.log(this.cid);
    // let page = this.$route.query.page || '1';
    // 第一次加载
    this.loadMore();
  }
};
</script>


/* // 这里的 scoped 表示只在当前组件起作用 （局部） */
<style lang="css" scoped>
.tmpl {
  margin-top: 30px;
  margin-bottom: 55px;
  width: 100%;
}
.photo-comment {
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding: 5px;
  background-color: #eee;
}
.photo-comment span:first-child {
  font-weight: bold;
  font-size: 18px;
}
.fbpl,
.jzgd {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
}
.fbpl button,
.jzgd button {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  font-size: 20px;
  color: #fff;
  background-color: #26a2ff;
}
.jzgd button {
  background-color: rgba(241, 81, 81, 0.9);
}
.comment-list li {
  height: 26px;
  line-height: 26px;
}
.comment-list li span:first-child {
  display: inline-block;
  width: 30px;
  text-align: center;
}
</style>